import React from "react";

function Function(props) {
  

  console.log("函数被执行");
  return <>
    
        <button onClick={props.x2}>x2</button>
        <div>
            第一个函数组件 {props.timer} 
    </div>
  </>;
}

class FunctionTimer extends React.Component {
  state = {
    timer: 0,
  };

  timer;

  componentDidMount() {
    setInterval(() => {
      const newTimer = this.state.timer + 1;
      this.setState({ timer: newTimer });
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  
  x2 = () => {
  this.setState({timer: this.state.timer +1})
  }
  //计时器
  render() {
    const { timer } = this.state;
    return <Function timer={timer} x2={this.x2} />;
  }
}

export default FunctionTimer;
